<template>
    <a-card :bordered="false">
        <a-spin :spinning="confirmLoading">
            <j-form-container :disabled="formDisabled">
                <a-form :form="form" slot="detail">
                    <a-row>
                        <div style="width:100%;">
                            <h2>登记后允许入场时限</h2>
                        </div>
                        <a-row :gutter="0">
                            <a-col :span="12">
                                <a-form-item label="登记后" :labelCol="labelCol"
                                    :wrapperCol="wrapperCol" prop="registerTime">
                                    <a-input-number
                                        v-decorator="['registerTime', validatorRules.registerTime]"
                                        placeholder="请输入时间" style="width: 50%"></a-input-number>
                                </a-form-item>
                            </a-col>
                            <a-col :span="6" style="margin-left: -300px;margin-top: 10px;">
                                <div style="width:100%;">
                                    <h3>小时内允许入场</h3>
                                </div>
                            </a-col>
                            <a-col :span="6" style="margin-top: 10px;">
                                <a-form-item label="是否启用" :labelCol="labelCol"
                                    :wrapperCol="wrapperCol" prop="register">
                                    <a-switch checked-children="启用" un-checked-children="禁用"
                                        v-decorator="['register', {rules: [{required: true, message: '请选择'}],initialValue: true,valuePropName: 'checked'}]" />
                                </a-form-item>
                            </a-col>
                        </a-row>

                        <div style="width:100%;">
                            <h2>审核通过后允许入场时限</h2>
                        </div>
                        <a-row :gutter="0">
                            <a-col :span="12">
                                <a-form-item label="审核通过后" :labelCol="labelCol"
                                    :wrapperCol="wrapperCol" prop="auditTime">
                                    <a-input-number
                                        v-decorator="['auditTime', validatorRules.auditTime]"
                                        placeholder="请输入时间" style="width: 50%"></a-input-number>
                                </a-form-item>
                            </a-col>
                            <a-col :span="6" style="margin-left: -300px;margin-top: 10px;">
                                <div style="width:100%;">
                                    <h3>小时内允许入场</h3>
                                </div>
                            </a-col>
                            <a-col :span="8" style="margin-top: 10px;">
                                <a-form-item label="是否启用" :labelCol="labelCol"
                                    :wrapperCol="wrapperCol" prop="audit">
                                    <a-switch checked-children="启用" un-checked-children="禁用"
                                        v-decorator="['audit', {rules: [{required: true, message: '请选择'}],initialValue: true,valuePropName: 'checked'}]" />
                                </a-form-item>
                            </a-col>
                        </a-row>

                        <a-col :span="24" style="text-align: center">
                            <a-button type="primary" @click="submitForm">确认保存</a-button>
                        </a-col>
                    </a-row>
                </a-form>
            </j-form-container>
        </a-spin>
    </a-card>
</template>

<script>

import { httpAction, getAction, putAction } from '@/api/manage'
import pick from 'lodash.pick'

export default {
    name: 'ControlStrategyForm',
    components: {
    },
    props: {
        //流程表单data
        formData: {
            type: Object,
            default: () => { },
            required: false
        },
        //表单模式：true流程表单 false普通表单
        formBpm: {
            type: Boolean,
            default: false,
            required: false
        },
        //表单禁用
        disabled: {
            type: Boolean,
            default: false,
            required: false
        }
    },
    data() {
        return {
            form: this.$form.createForm(this),
            model: {},
            labelCol: {
                xs: { span: 24 },
                sm: { span: 5, offset: 0 }, // 标签列的设置
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 19, offset: 0 }, // 包装列的设置，调整span为19，使输入框左对齐
            },
            confirmLoading: false,
            validatorRules: {
                registerTime: {
                    rules: [
                        { required: true, message: '请输入时间!(数字)' },
                    ]
                },
                auditTime: {
                    rules: [
                        { required: true, message: '请输入时间!(数字)' },
                    ]
                },
            },
            url: {
                add: "/tankerRules/tankerRules/add",
                edit: "/tankerRules/tankerRules/edit",
                queryById: "/tankerRules/tankerRules/queryById",
                getByLocation: "/tankerRules/tankerRules/getByLocation",
            },
        }
    },
    computed: {
        formDisabled() {
            if (this.formBpm === true) {
                if (this.formData.disabled === false) {
                    return false
                }
                return true
            }
            return this.disabled
        },
        showFlowSubmitButton() {
            if (this.formBpm === true) {
                if (this.formData.disabled === false) {
                    return true
                }
            }
            return false
        }
    },
    created() {
        //如果是流程中表单，则需要加载流程表单data
        this.showFlowData();
        this.getByLocation();
    },
    methods: {
        getByLocation() {
            getAction(this.url.getByLocation).then((res) => {
                if (res.success) {
                    this.model = res.result;
                    this.edit(this.model);
                }
            });
        },
        add() {
            this.edit({});
        },
        edit(record) {
            this.form.resetFields();
            this.model = Object.assign({}, record);
            this.visible = true;
            this.$nextTick(() => {
                this.form.setFieldsValue(pick(this.model, 'id', 'registerTime', 'auditTime', 'location', 'register', 'audit'))
            })
        },
        //渲染流程表单数据
        showFlowData() {
            if (this.formBpm === true) {
                let params = { id: this.formData.dataId };
                getAction(this.url.queryById, params).then((res) => {
                    if (res.success) {
                        this.edit(res.result);
                    }
                });
            }
        },
        submitForm() {
            const that = this;
            // 触发表单验证
            this.form.validateFields((err, values) => {
                if (!err) {
                    that.confirmLoading = true;
                    let formData = Object.assign(this.model, values);
                    console.log("表单提交数据", formData)
                    putAction(this.url.edit, formData).then((res) => {
                        if (res.success) {
                            that.$message.success(res.message);
                            that.getByLocation();
                        } else {
                            that.$message.warning(res.message);
                        }
                    }).finally(() => {
                        that.confirmLoading = false;
                    })
                }

            })
        },
        popupCallback(row) {
            this.form.setFieldsValue(pick(row, 'id', 'registerTime', 'auditTime', 'location', 'register', 'audit'))
        },
    }
}
</script>
<style scoped>
/* 内嵌子表背景颜色 */
.j-inner-table-wrapper /deep/ .ant-table-expanded-row .ant-table-wrapper .ant-table-tbody .ant-table-row {
    background-color: #ffffff;
}
</style>